<template>
  <div class="container">
    <div class="panel2">
      <el-menu
        :default-active="activeIndex"
        class="elmenu"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">行业政策</el-menu-item>
        <el-menu-item index="2">领导活动</el-menu-item>
      </el-menu>
      <!-- 搜索 -->
      <div class="elinp">
        <el-input
          placeholder="请输入关键词"
          v-model="keyword"
          @keydown.enter.native="search"
        >
        </el-input>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="search"
        ></el-button>
      </div>
      <!-- 导出报告 -->
      <el-button
        @click="toReport"
        :class="{ report: true, 'ash-report': isReport }"
        ><i class="el-icon-top"></i
        >{{ isReport ? "取消导出" : "导出报告" }}</el-button
      >
      <!-- 行业政策 -->
      <Policy
        v-if="activeIndex === '1'"
        ref="policy"
        :activeIndex="activeIndex"
        :keyword="keyword"
        :isReport="isReport"
      />
      <!-- 领导活动 -->
      <Activities
        v-if="activeIndex === '2'"
        ref="activities"
        :activeIndex="activeIndex"
        :keyword="keyword"
        :isReport="isReport"
      />
    </div>
  </div>
</template>

<script>
import Policy from "./child/Policy";
import Activities from "./child/Activities";
export default {
  components: {
    Policy,
    Activities,
  },
  data() {
    return {
      activeIndex: "1",
      keyword: "",
      isReport: false,
    };
  },
  methods: {
    handleSelect(item) {
      this.activeIndex = item;
      this.isReport = false;
    },
    toReport() {
      this.isReport = !this.isReport;
      if (this.isReport) {
        if (this.activeIndex === "1") {
          this.$refs.policy.resultList.map((item) => {
            item.checked = false;
          });
          this.$refs.policy.resultList = this.$refs.policy.resultList;
        } else if (this.activeIndex === "2") {
          this.$refs.activities.resultList.map((item) => {
            item.checked = false;
          });
          this.$refs.activities.resultList = this.$refs.activities.resultList;
        }
      }
    },
    search() {
      if (this.activeIndex === "1") {
        this.$refs.policy.pageNum = 1;
        this.$refs.policy.init(this.keyword === "" ? null : this.keyword);
      } else if (this.activeIndex === "2") {
        this.$refs.activities.pageNum = 1;
        this.$refs.activities.init(this.keyword === "" ? null : this.keyword);
      }
    },
  },
  mounted() {
    let keyword = this.$route.params.keyword
    if (keyword) {
      this.keyword = keyword
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  .panel2 {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    .elinp {
      position: absolute;
      top: 16px;
      right: 160px;
      width: 458px;
      height: 32px;
      border: 1px solid #dcdfe6;
      border-radius: 16px;
      box-sizing: content-box;
      display: flex;
      ::v-deep {
        .el-input__inner {
          border: 0;
          height: 32px;
          line-height: 32px;
          border-radius: 16px;
          &:focus {
            border-color: #dcdfe6;
          }
        }
        .el-button {
          width: 100px;
          height: 32px;
          color: #fff;
          font-size: 20px;
          background-color: #241c75;
          border: none;
          border-radius: 16px;
          padding: 0;
        }
      }
    }
    .report {
      position: absolute;
      top: 16px;
      right: 20px;
      width: 110px;
      height: 32px;
      line-height: 30px;
      padding: 0;
      border-radius: 15px;
      border-color: #241c75;
      color: #241c75;
      background-color: transparent;
      ::v-deep {
        i {
          margin-right: 4px;
        }
      }
    }
    .ash-report {
      border-color: #909399;
      color: #909399;
    }
  }
}
.elmenu {
  ::v-deep {
    .is-disabled {
      opacity: 1 !important;
      cursor: default !important;
      &:hover {
        color: #909399 !important;
      }
    }
  }
}
</style>